<template>
	<view class="wanlshop-container">
		<view
			v-if="common.modulesData.shopModules.page"
			class="wanlshop-container__head"
		>
			<view  style="height:100px;padding-top:0px;position: relative; background-image: url('https://ddguan.oss-cn-beijing.aliyuncs.com/uploads/20240717/39d055368e15fb13d3a92738b956dd17.jpg');background-size: 100%;">
				<view class="navigater flex align-center justify-between" style="height: 41px;padding-left: 12px;padding-right: 12px; margin-top: ;
				position: absolute;
				  left: 0;
				  bottom: 6px;
				  width: 100%;">
					<view class="search flex align-center margin-lr-sm round">						
						<view class="icon text-df text-bold wanl-gray-dark">
							<text class="wlIcon-sousuo1"></text>
						</view>
						<swiper vertical autoplay circular interval="3000">
							<swiper-item @tap="handleSearch('')">
								<text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
							</swiper-item>
							<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords" @tap="handleSearch(item.keywords)">
								<text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>			
		</view>
		<!-- 主体 -->
		
		<wanl-shop-page
			:windowHeight="windowHeight"
			:headHeight="headHeight"
			:headTop="160"
			:pageModules="common.modulesData.shopModules"
			:adData="common.adData"
		/>
		
		<!-- 自定义组件 -->
		<wanl-page-shoplist :pageData="{data:search}"/>
		<!-- 自定义组件 -->
		
		<tab-bar></tab-bar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import wanlShopPage from '@/components/wanl-shop/page';
import wanlShopFind from '@/components/wanl-shop/find';

export default {
	components: {
		wanlShopPage,
		wanlShopFind
	},
	computed: {
		...mapState(['common', 'user', 'update','statistics','cart'])
	},
	data() {
		return {
			headHeight: 50,
			windowHeight: 0,
			headTop: 0,
			currentItemId: 'home',
			currentData: {},
			scrollLeft: 0,
			isModal: false,
			contentText: {
				contentdown: '下拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '我是有底线的'
			},
			search:{},
			hfwyData:[]
		};
	},
	onLoad(option){
		console.log(option);
		if('search' in option){
			this.search = {search: option.search};				
		}
		this.loadData()
	},
	onShow() {
		
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height;
		this.windowHeight = 420;
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: this.$store.state.common.modulesData.homeModules.page
					? this.$store.state.common.modulesData.homeModules.page.style
							.navigationBarTextStyle
					: '',
				backgroundColor: this.$store.state.common.modulesData.homeModules.page
					? this.$store.state.common.modulesData.homeModules.page.style
							.navigationBarBackgroundColor
					: ''
			});
		}, 200);
	},
	methods: {

		loadData(){
			
		},
		
		// 搜索
		handleSearch(text) {
			this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
		},
		
	}
};
</script>

<style lang="scss">
.wanlshop-container {
	&__head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background:  linear-gradient(to bottom, #efe4d2, #d4bd92);
		
		.navigater {
			height: 86rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 220rpx;
			/* #endif */
			.search {
				flex: 1;
				background-color: #fff;
				height: 66rpx;
				border: 2rpx solid #fff;
				.icon {
					margin: 0 20rpx;
				}
				swiper {
					height: 100%;
					width: 100%;
					margin-right: 10rpx;
					swiper-item {
						display: flex;
						align-items: center;
					}
				}
			}			
		}
		
		

		
		
	}

}
</style>
